<template>
  <div id="app" class="back">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>

  </div>


</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      transitionName: ''
    }
  },
  // watch $route 决定使用哪种过渡
  watch: {
    '$route' (to, from) {
      //此时假设从index页面跳转到pointList页面
      // console.log(to); // "/pointList"
      // console.log(from); // “/index”
      const routeDeep = ['/Home', '/MoreJobInfo/index', '/MoreCompany/index', '/MoreNotice/index']
      const toDepth = routeDeep.indexOf(to.path)
      const fromDepth = routeDeep.indexOf(from.path)
      this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
    }
  },

}
</script>

<style>
#app {
  width: 100%;
  /*min-width: 1800px;*/
  height: 100%;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


@keyframes fold-left-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fold-left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.fold-left-enter-active {
  animation-name: fold-left-in;
  animation-duration: .3s;
}

.fold-left-leave-active {
  animation-name: fold-left-out;
  animation-duration: .3s;
}

.fold-right-enter-active {
  animation-name: fold-right-in;
  animation-duration: .3s;
}

.fold-right-leave-active {
  animation-name: fold-right-out;
  animation-duration: .3s;
}

.back {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("assets/login2.jpg");
  /*background:rgba(0, 0, 0, 0) linear-gradient(rgb(0, 90, 167), rgb(255, 253, 228)) repeat scroll 0% 0%*/
  /*background-color: #69F0AE;*/
}
</style>
